<template>
  <div class="app-container home">
    <el-select
        v-model="queryParams.type"
        placeholder="请选择"
        size="large"
        style="width: 240px;"
        @change="queryGetTopicList"
    >
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
      <FullCalendar style="margin-top: 20px" ref="fullCalendar" :options="calendarOptions">
      </FullCalendar>
  </div>
</template>

<script setup name="Index">
import {getTopicList} from "@/api/biz/statApi";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
const options = [
  {
    value: '0',
    label: '全部',
  },
  {
    value: '1',
    label: '展示超期任务',
  },
  {
    value: '2',
    label: '展示预警任务',
  },
  {
    value: '3',
    label: '展示已完成任务',
  }
]
const router = useRouter();
const today = new Date();
const fullCalendar = ref(null);
const calendarApi = ref(null);
// 创建一个响应式引用来保存DOM元素
const queryParams = ref({
  year: today.getFullYear(),
  month: today.getMonth() + 1,
  type: '0',
});
onMounted(() => {
  calendarApi.value = fullCalendar.value.getApi();
});
const nextClick = () => {
  calendarApi.value.next(); // 将日历向前移动一步（例如，一个月或一周）。
  getMonthDates();
}
const prevClick = () => {
  calendarApi.value.prev();// 将日历后退一步（例如，一个月或一周）。
  getMonthDates();
}
const getMonthDates = async() => {
  const currentView = calendarApi.value.view;
  const start = currentView.currentStart;
  queryParams.value.year = start.getFullYear();
  queryParams.value.month = start.getMonth()+1;
  queryGetTopicList();
};
const calendarOptions = reactive({
  height: 'calc(100vh - 184px)',
  plugins: [dayGridPlugin, interactionPlugin],
  customButtons: {
    today: {
      text:'今日'
    },
    next: {
      text:'上个月',
      click: nextClick
    },
    prev: {
      text:'下个月',
      click: prevClick
    }
  },
  locale: 'zh-cn',
  initialView: "dayGridMonth",
  eventClick: (info) => {//主要数据来源事件
    router.push("/biz/bizTopic?topicName="+info.event._def.title);
  },
  dateClick: (info) => {//主要数据来源事件
    console.log(info)
  }
});

function queryGetTopicList() {
  getTopicList(queryParams.value).then(response => {
    calendarOptions.events = response.data;
  })
}

queryGetTopicList();

</script>

<style scoped lang="scss">


</style>
